<template>
    <div class="my-notice">
        <div class="notice-content-wrapper">
            <div class="notice-icon">
                <img src="@/assets/img/laba.jpg" alt="通知图标" />
            </div>
            <div class="notice-container">
                <vue-seamless-scroll 
                    :data="notices" 
                    :class-option="classOption"
                    class="seamless-warp"
                >
                    <ul class="notice-list">
                        <li 
                            class="notice-item" 
                            v-for="item in notices" 
                            :key="item.id"
                        >
                            <div class="notice-content">
                                {{ item.content }}
                            </div>
                        </li>
                    </ul>
                </vue-seamless-scroll>
            </div>
        </div>
    </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import * as API from '@/utils/api';

export default {
    name: 'MyNotice',
    components: {
        vueSeamlessScroll
    },
    data() {
        return {
            notices: [],
            classOption: {
                step: 0.5, // 滚动速度，数值越大速度越快
                limitMoveNum: 3, // 启动无缝滚动最小数据量
                hoverStop: true, // 是否鼠标悬停暂停
                direction: 1, // 滚动方向 0 往下 1 往上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 40, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 3000 // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
    mounted() {
        this.fetchNotices();
    },
    methods: {
        fetchNotices() {
            API.getNoticeStats().then(res => {
                if (res.code === 0) {
                    this.notices = res.data || [];
                }
            }).catch(err => {
                console.error('获取通知数据失败:', err);
            });
        }
    }
}
</script>

<style lang="less" scoped>
.my-notice {
    width: 100%;
    height: 40px;
    background: transparent;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    
    .notice-content-wrapper {
        display: flex;
        align-items: center;
        
        .notice-icon {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            margin-right: 1px;
            
            img {
                width: 20px;
                height: 20px;
                object-fit: contain;
            }
        }
        
        .notice-container {
            height: 40px;
            overflow: hidden;
            position: relative;
            min-width: 0;
            
            .seamless-warp {
                height: 100%;
                overflow: hidden;
                position: relative;
            }
            
            .notice-list {
                list-style: none;
                margin: 0;
                padding: 0;
                
                .notice-item {
                    height: 40px;
                    padding: 0;
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    
                    .notice-content {
                        color: #1FC6FF;
                        font-size: 13px;
                        line-height: 1.4;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-weight: 400;
                        display: inline-block;
                        max-width: 100%;
                    }
                }
            }
        }
    }
}
</style> 